import React from 'react';

export class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      msg: '',
    };
  }

  // 1 父组件给子组件提供函数
  giveMoney = (msg) => {
    console.log('父组件收到的消息', msg);
    this.setState({
      msg: msg,
    });
  };

  render() {
    // props 是只读的
    return (
      <div>
        我是父组件，我收到的消息：{this.state.msg}
        <Child giveMoney={this.giveMoney} />
      </div>
    );
  }
}

// 这个子组件一般来说另外一个文件中定义的，或者说是别人定义的
class Child extends React.Component {
  sendMsg = () => {
    console.log('我没钱了');
    // 这个函数是父组件传递过来的
    this.props.giveMoney('我没钱了');
  };

  render() {
    return (
      <div>
        我是子组件，要向父组件发消息：“我没钱了”
        <button onClick={this.sendMsg}>发消息</button>
      </div>
    );
  }
}
